<!--
 * @Author: Lizhenyu
 * @Date: 2021-07-08 15:35:04
 * @FilePath: \usp-osm-frondend\src\views\productCenter\label\index.vue
-->
<template>
  <div class="source" v-loading="pageLoading" element-loading-text="loading">
    <v-notes>
      <el-form label-width="160px" :model="searchModel" ref="searchForm" class="search-form" size="small">
        <el-row class="search-row">
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="标签名称" prop="labelName">
                  <el-input
                    placeholder="标签名称"
                    v-model="searchModel.labelName"
                    @input="searchModel.labelName=searchModel.labelName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                    clearable
                    @keyup.enter.native.prevent="searchLabel"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="标签类型" prop="type">
                  <el-select v-model="searchModel.labelType" placeholder="请选择" popper-class="select-class" :popper-append-to-body="false">
                    <el-option key label="全部" value></el-option>
                    <el-option
                      v-for="item in lookupItems.LABELTYPE"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="searchModel.isEnable" placeholder="请选择" popper-class="select-class" :popper-append-to-body="false">
                    <el-option key label="全部" value></el-option>
                    <el-option
                      v-for="item in isEnableList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="search-row">
          <el-col :span="8" :offset="16" style="text-align:right;">
            <el-button
              @click="resetForm('searchForm')"
              icon="el-icon-refresh-left"
              class="white-btn"
            >重置</el-button>
            <el-button
              @click="searchLabel"
              icon="el-icon-search"
              class="dark-btn search-btn"
            >搜索</el-button>
          </el-col>
        </el-row>
        <!-- Filter start -->
      </el-form>
    </v-notes>
    <div class="mb-lg">
      <v-table
        :data="tableData"
        ref="multipleTable"
        :listLoading="listLoading"
        :loadingText="loadingText"
        :paginationTotal="total"
        v-on:pageSizeChange="pageSizeChange"
        v-on:currentPageChange="currentPageChange"
        border
        pagination
      >
      <div slot="header">
        <el-button
          v-if="$auth('commodityCenter:shopLabelManagement:add')"
          @click="addLabel"
          icon="el-icon-plus"
          class="dark-btn"
          style="margin-bottom:0 !important"
        >新增</el-button>
      </div>
        <el-table-column label="标签名称" align="center" min-width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span @click="labelDetail(scope.row)" class="colorLink">{{scope.row.labelName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签类型" align="center" min-width="110" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{getDictionaryNameByCode('LABELTYPE', scope.row.labelType)}}</template>
        </el-table-column>
        <el-table-column label="标签描述" align="center" min-width="110" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{scope.row.labelDesc}}</template>
        </el-table-column>
        <el-table-column label="状态" align="center" min-width="110" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{scope.row.isEnable === '0' ? '禁用' : '启用'}}</template>
        </el-table-column>
        <el-table-column label="商品数量" min-width="110" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" v-if="scope.row.productNameList" popperClass="table-popper">
              <span v-for="(item,index) in scope.row.productNameList" :key="index">
                {{item}}<span v-if="index!=scope.row.productNameList.length-1"> / </span>
              </span>
              <div slot="reference" class="name-wrapper green">{{scope.row.productCount}}</div>
            </el-popover>
            <div slot="reference" class="name-wrapper green" v-if="!scope.row.productNameList">
              {{scope.row.productCount}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="130px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" min-width="130px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="110" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-row type="flex" justify="space-around">
              <el-col>
                <span v-if="$auth('commodityCenter:shopLabelManagement:operate')" class="edit-item colorLink" @click="Disable(scope.row)">
                    {{scope.row.isEnable === '0' ? '启用' : '禁用'}}
                </span>
              </el-col>
              <el-col>
                <span v-if="$auth('commodityCenter:shopLabelManagement:edit')" class="edit-item colorLink" @click="editLabel(scope.row)">
                  编辑
                </span>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </v-table>
    </div>
  </div>
</template>

<script>
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { getLabel, updateLabel } from '@/api/label'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
export default {
  name: 'labelIndex',
  components: {
    VTable,
    VNotes
  },
  mixins: [common],
  data () {
    return {
      pageLoading: false,
      searchModel: {
        displayStart: 0, // 开始查询条数
        displayLength: 10, // 每页展示条数
        labelName: '', // 标签名称
        labelType: '',
        isEnable: ''
      },
      tableData: [],
      isEnableList: [
        {
          id: 1,
          value: '1',
          label: '启用'
        },
        {
          id: 2,
          value: '0',
          label: '禁用'
        }
      ],
      listLoading: false,
      loadingText: '加载中...',
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  computed: {
    ...mapGetters(['lookupItems', 'roles'])
  },
  created () {
    this.fetchList()
  },
  methods: {
    searchLabel () {
      this.searchModel.displayStart = 0
      this.$refs.multipleTable.restPage()
      this.fetchList()
    },
    fetchList () {
      if (!this.$auth('commodityCenter:shopLabelManagement:list')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      const self = this
      this.listLoading = true
      getLabel(self.searchModel)
        .then(response => {
          self.listLoading = false
          // 调用查询接口
          const data = response
          if (data) {
            const obj = data.obj
            self.tableData = obj.data || []
            self.tableData.forEach(item => {
              item.updateTime = parseTime(item.updateTime)
              item.createTime = parseTime(item.createTime)
            })
            self.total = obj.total
          } else if (Number(data.code) === 0) {
            this.$confirm(data.msg, {
              confirmButtonText: '确认',
              showCancelButton: false
            })
          } else {
            this.$confirm(this.$t(data.code), {
              confirmButtonText: '确认',
              showCancelButton: false
            })
          }
        })
    },
    resetForm (formName) {
      this.searchModel.labelType = ''
      this.searchModel.isEnable = ''
      this.searchModel.labelName = ''
      this.searchLabel()
    },
    Disable (row) {
      if (!this.$auth('commodityCenter:shopLabelManagement:operate')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      const params = {
        id: row.id,
        isEnable: row.isEnable === '0' ? '1' : '0',
        labelName: row.labelName,
        labelType: row.labelType
      }
      this.listLoading = true
      updateLabel(params).then(res => {
        if (res) {
          if (Number(res.code) === 1) {
            this.$alert('操作成功', {
              callback: action => {
                this.fetchList()
              }
            })
          } else {
            this.$alert('操作失败')
          }
          this.listLoading = false
        }
      }).catch(() => {
        this.listLoading = false
        this.$alert('操作失败')
      })
    },
    pageSizeChange (size) {
      this.searchModel.displayLength = size
      this.fetchList()
    },
    currentPageChange (curPage) {
      this.searchModel.displayStart = curPage - 1
      this.fetchList()
    },
    addLabel () {
      this.$router.push({ name: 'addLabel', id: '' })
    },
    labelDetail (row) {
      if (!this.$auth('commodityCenter:shopLabelManagement:detail')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      this.$router.push({ name: 'editLabel', params: { id: row.id, type: 'detail' } })
    },
    editLabel (row) {
      if (!this.$auth('commodityCenter:shopLabelManagement:edit')) {
        // 权限控制
        this.$alert('您没有权限。')
        return false
      }
      this.$router.push({ name: 'editLabel', params: { id: row.id, type: 'edit' } })
    }
  }
}
</script>

<style>

</style>
